<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="bootstrap3\css\bootstrap.min.css" rel="stylesheet">
    <script src="bootstrap3\js\jquery-3.1.1.min.js">

    </script>
    <script src="bootstrap3\js\bootstrap.min.js">

    </script>
    <script language="javascript">
        function dv_click() {
            var txt_show = $get('tx_show').value;
            alert(txt_show);
        }

        function dvs_click() {

            alert(test);
        }
        $('sub').on("click", dvs_click());
    </script>
</head>
<h2>HI 我的bootstrap测试页面<small>学习中。。。</small></h2>
<div class="container-fulid">
    <div class="row">
        <div class="col-xs-4 col-lg-4" style="background-color:burlywood"><span class="glyphicon glyphicon-star"><strong>收藏</strong></span></div>
        <div class="col-xs-2 col-lg-2 col-lg-offset-2" style="background-color:chartreuse">
            <input type="text" value="the  top  text" id="tx_show"></input>
        </div>
        <div class="col-xs-4 col-lg-4" style="background-color: gray"><input type="submit" class="btn btn-primary btn-sm btn-block " id="sub" value="submit"></input>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-4" style="background-color:aqua">1</div>
        <div class="col-xs-10" style="background-color:aquamarine">2</div>
        <div class="col-xs-1" style="background-color:cadetblue"><a href="http://www.baidu.com">baidu</a></div>
    </div>
</div>

<div class="container-fulid">
    <div class="row">
        <div class="col-md-4" style="background-color:darkgreen">123</div>
        <div class="col-md-4" style="background-color:tomato"><strong>321</strong></div>
        <div class="col-md-4" style="background-color:mediumvioletred">sss</div>
    </div>

    <div class="row">
        <div class="col-sm-6 col-md-3" style="background-color:green">
            <b>TTTTT</b> <i>dddddd</i> fffff
        </div>
        <div class="col-sm-6 col-md-3" style="background-color:tomato">GGGGG</div>
        <div class="clearfix visible-xs-block"></div>
        <div class="col-sm-6 col-md-3">
            <div class="row">
                <div class="col-sm-2 col-sm-pull-1" style="background-color:red">harf</div>
                <div class="col-sm-2 text-right" style="background-color:yellow">T2-harf</div>
                <div class="col-sm-2 text-center" style="background-color:red">harf</div>
                <div class="col-sm-2" style="background-color:yellow">T2-harf</div>
                <div class="col-sm-2" style="background-color:red">harf</div>
                <div class="col-sm-2" style="background-color:yellow">T2-harf</div>
            </div>

        </div>
        <div class="col-sm-6 col-md-3" style="background-color:tomato">
            <p>&nbsp;&nbsp;&nbsp;&nbsp;UUUUU is test p property demo
                <mark>UUUUU is test p property demo</mark>
                <del>UUUUU is test p property demo UUUUU is test p property demo</del>
            </p>
            <p class="lead">
                <u>UUUUU <small>is  p <smal>property</smal></small></u>
                <s>demo</s>
            </p>
        </div>
    </div>

    <p class="text-left"> the 1 pages</p>
    <p class="text-right"> the 2 pages</p>
    <p class="text-center"> the 3 pages</p>
    <p class="text-justify"> the 4 pages</p>
    <p class="text-nowrap"> the 5 pages</p>
    <p class="text-lowercase"> the 6 Pages</p>
    <p class="text-uppercase"> the 7 Pages</p>
    <p class="text-capitalize"> the 8 PAGES</p>
    <p class="text-capitalize"> the new model <abbr title="online to offline">o2o</abbr></p>
    <blockquote>
        <p> long long age , on the new town</p>
        <footer>some history was overrid <cite title="king gao chao">kings</cite></footer>
    </blockquote>

    <blockquote class="blockquote-reverse">
        <p> long long age , on the new town</p>
        <footer>some history was overrid <cite title="king gao chao">kings</cite></footer>
    </blockquote>


    <ul>
        <li>all</li>
        <li>some</li>
        <li>other
            <ul>
                <li>goods</li>
                <li>car</li>
            </ul>
        </li>
    </ul>
    <p>the <code>console</code> useable is a  ....</p>
    <p>user print <kbd>hello</kbd> </p>
</div>

</html>